<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="jquery-3.7.1.min.js"></script>
  <!--  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

</head>
<body>

<p>段落1</p>
<p>段落2</p>
<p class="special">段落3</p>
<p>段4</p>
<p>段落5</p>
<p></p>

<p>
  <span>段落7</span>
</p>


<input type="text" name="username"> 账号 <br>
<input type="text" name="password"> 密码 <br>


<hr>

<p>这是一个有内容的段落。</p>
<p></p>
<div>
  <span>这是一个有内容的div。</span>
</div>
<div></div>
<script>

  $("p:parent").css('background', 'red');
  $("div:parent").css('background', 'blue');


  $('p:has(span)').css('background', '#f0f0f0');
  // $("p:empty").css("background", 'red');
  // $("p:contains('段落')").css("background", 'red');

  // $('input:focus').css('border', '2px solid green');

  // $("p:first").css("background", 'red');
  // $("p:last").css("background", 'red');


  // $("p:not(.special)").css("background", 'red');
  // $("p:not(:first)").css("background", 'red');

  // $("p:even").css("background", 'red');
  // $("p:odd").css("background", 'red');
  // $("p:eq(1)").css("background", 'red');
  // $("p:gt(2)").css("background", 'red');
  // $("p:lt(2)").css("background", 'red');
</script>

</body>
</html>
